{% extends 'layout.html' %}
{% block css %}
    <link rel="stylesheet" href="/static/ztree/css/bootstrapStyle/bootstrapStyle.css" type="text/css">
    <style>
        #api_define_url_span {
            display: block;
            width: 200px;
            margin: 0 auto;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        #api_define_url_span:hover:before {
            position: absolute;
            background-color: #fff;
            border-radius: 3px;
            /*这里显示的内容为表格中自定义的labelTooltip属性对应的值*/
            content: attr(labelTooltip);
            z-index: 2;

        }

    </style>
{% endblock %}
{% block content %}
    <section id="main-content">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="">
                        <a href="{% url 'apitests:api_define_add' %}?Project={% if Project %}{{ Project }}
                          {% else %}{{ projects.first.name }}{% endif %} ">
                            <button type="button" class="btn btn-primary btn-flat btn-addon m-b-10 m-l-5"
                                    data-target="#projectaddForm" data-toggle="modal"><i
                                    class="ti-plus"></i>添加接口定义

                            </button>
                        </a>

                        <div class="col-md-3" style="float: right;top:-8px">
                            <form action="{% url 'apitests:api_define_list' %}" method="get">
                                <div class="input-group">

                                    <input type="text" id="search_text" name="Search" class="form-control"
                                           placeholder="Search Round" style="border-radius:20px"
                                           value="{{ search_text }}">
                                    <span class="input-group-btn">
                                    <button class="btn btn-primary btn-group-right search_btn"
                                            type="submit"><i
                                            class="ti-search"></i></button></span>
                                </div>
                            </form>
                        </div>
                    </div>
                    {#列表#}
                    <div class="card-body">
                        <div class="table-responsive" style="text-align: center;">
                            <table class="table">
                                <thead>
                                <tr>
                                    <th>所属模块</th>
                                    <th>接口名称</th>
                                    <th>请求类型</th>
                                    <th>负责人</th>
                                    <th>接口路径</th>
                                    <th>接口状态</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for api_define in obj_list.object_list %}
                                    <tr>
                                        <input type="hidden" value="{{ api_define.id }}" id="api_define_id">
                                        <td id="api_define_module">{{ api_define.module }}</td>
                                        <td id="api_define_name">{{ api_define.name }}</td>
                                        <td id="api_define_method">
                                            {% if api_define.method == 0 %}
                                                <span class="badge badge-pink ">{{ api_define.get_method_display }}</span>
                                            {% elif   api_define.method == 1 %}
                                                <span class="badge badge-dark  ">{{ api_define.get_method_display }}</span>
                                            {% elif   api_define.method == 2 %}
                                                <span class="badge badge-primary">{{ api_define.get_method_display }}</span>
                                            {% elif   api_define.method == 3 %}
                                                <span class="badge badge-success ">{{ api_define.get_method_display }}</span>
                                            {% endif %}
                                        </td>
                                        <td id="api_define_tester">{{ api_define.tester }}</td>
                                        <td id="api_define_url" style="position: relative">
                                            <span labelTooltip="{{ api_define.interface }}"
                                                  id="api_define_url_span">{{ api_define.interface }}</span></td>

                                        <td id="api_define_status">
                                            {% if api_define.status is 0 %}
                                                <span class="badge badge-primary">{{ api_define.get_status_display }}</span>
                                            {% else %}
                                                <span class="badge badge-danger">
                                                    {{ api_define.get_status_display }}</span>
                                            {% endif %}
                                        </td>
                                        <td id="api_define_create_time"
                                            style="display: block;width: 200px;margin: auto">{{ api_define.create_time }}</td>
                                        <td>
                                            {#                                            <span class="btn btn-info m-b-10 m-l-5"#}
                                            {#                                                  onclick="api_run_case({{ api_define.id }})">执行</span>#}
                                            <a class="btn btn-info m-b-10 m-l-5"
                                               href="{% url 'apitests:api_define_edit' %}?api_define_id={{ api_define.id }} "
                                            >编辑</a>
                                            <span class="btn btn-dark m-b-10 m-l-5"
                                                  onclick="api_define_del({{ api_define.id }})">删除</span>

                                        </td>
                                    </tr>
                                {% endfor %}


                                </tbody>
                            </table>
                        </div>

                    </div>

                </div>
            </div>

        </div>

        <div class="modal fade" id="loading" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             data-backdrop='static'>
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    用例执行中
                </div>
            </div>
        </div>
    </section>
{% endblock %}
{% block paginate %}
    <div class="dataTables_paginate paging_simple_numbers" id="expendable-data-table_paginate">
        <ul class="pagination">

            {% if  obj_list.has_previous %}
                <li class="paginate_button page-item previous "
                    id="expendable-data-table_previous">
                    <a href="?{{ obj_list.previous_page_number.querystring }}"
                       aria-controls="expendable-data-table"
                       data-dt-idx="0" tabindex="0"
                       class="page-link">上一页</a>
                </li>
            {% else %}
                <li class="paginate_button page-item disabled "
                    id="expendable-data-table_previous">
                    <a href="?{{ obj_list.previous_page_number.querystring }}"
                       aria-controls="expendable-data-table"
                       data-dt-idx="0" tabindex="0"
                       class="page-link">上一页</a>
                </li>
            {% endif %}
            {% for page in obj_list.pages %}
                {% if page %}
                    {% ifequal page obj_list.number %}
                        <li class="paginate_button page-item active"><a
                                href="?{{ page.querystring }}"
                                aria-controls="expendable-data-table"
                                data-dt-idx="1" tabindex="0"
                                class="page-link">{{ page }}</a></li>
                    {% else %}
                        <li class="paginate_button page-item "><a href="?{{ page.querystring }}"
                                                                  aria-controls="expendable-data-table"
                                                                  data-dt-idx="2" tabindex="0"
                                                                  class="page-link">{{ page }}</a>
                        </li>
                    {% endifequal %}
                {% else %}
                    <li class="page-item"><a href="" class="page-link">...</a></li>
                {% endif %}
            {% endfor %}

            {% if obj_list.has_next %}
                <li class="paginate_button page-item next" id="expendable-data-table_next">
                    <a href="?{{ obj_list.next_page_number.querystring }}"
                       aria-controls="expendable-data-table"
                       data-dt-idx="4" tabindex="0" class="page-link">下一页</a>
                </li>
            {% else %}
                <li class="paginate_button page-item disabled" id="expendable-data-table_next">
                    <a href="?{{ obj_list.next_page_number.querystring }}"
                       aria-controls="expendable-data-table"
                       data-dt-idx="4" tabindex="0" class="page-link">下一页</a>
                </li>
            {% endif %}

        </ul>
    </div>
{% endblock %}
{% block js %}

    {#删除#}
    <script>
        function api_define_del(api_define_id) {
            swal(
                {
                    title: "Are you sure to delete ?",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "Yes, delete it !!",
                    cancelButtonText: "No, cancel it !!",
                    closeOnConfirm: false,
                    closeOnCancel: false,
                },
                function (isConfirm) {
                    if (isConfirm) {
                        $.ajax({
                            url: "{% url 'apitests:api_define_del' %}",
                            type: "POST",
                            data: {"api_define_id": api_define_id},
                            beforeSend: function (xhr) {
                                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                            },
                            success: function (data) {
                                if (data.status) {
                                    swal({
                                        title: '删除成功',
                                        timer: 1000,
                                        showConfirmButton: false,
                                    });
                                    var timer = setTimeout(() => {
                                        window.location.reload();
                                        clearTimeout(timer)
                                    }, 1000)
                                }
                            }
                        })

                    } else {
                        swal({
                            title: "Sweet auto close alert !!",
                            timer: 0.5,
                            showConfirmButton: false,
                        });
                    }
                }
            );
        }

    </script>
    <script>
        function project_change() {
            $('#project_change_form').submit()
        }
    </script>
{% endblock %}